<template>
  <div class="content">
    <div>
      <ContentRated />
      <!-- <ContentMovies @finish="fn" ref="movies" @finishmore="finishmore" /> -->
      <ContentMovies />
      <p v-if="show" class="no-more">没有更多了</p>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import ContentRated from "./components/ContentRated.vue";
import ContentMovies from "./components/ContentMovies.vue";
import { mapState, mapActions } from "vuex";

let bs;
export default {
  components: {
    ContentRated,
    ContentMovies,
  },
  computed: mapState("index", ["moviesList"]),
  data() {
    return {
      show: false,
    };
  },
  async mounted() {
    await this.asyncGetMoviesList();
    this.fn();
  },
  // 这里的bs的添加的时机是ContentMovies组件里面的页面渲染结束
  methods: {
    ...mapActions("index", ["asyncGetMoviesList", "getMore"]),
    fn() {
      // console.log("请求结束了");
      bs = new BScroll(".content", {
        scrollX: false,
        scrollY: true,
        // 让之前的点击事件生效
        click: true,
        // 允许我们开启上拉加载的功能
        // pullUpLoad: true,
        pullUpLoad: {
          // 阈值
          // 离最下面还有多少像素的时候触发pullingUp
          threshold: 50,
        },
      });

      // 监听拉到底的事件
      // 默认只会触发一次
      bs.on("pullingUp", async () => {
        // 拉到底了要去请求接口
        // 请求到的接口要拼接到原来的数据上面
        console.log("我现在拉到底了");
        // this.$refs.movies.getMore();
        const done = await this.getMore();
        bs.refresh();
        if (!done) {
          bs.finishPullUp();
        }
      });
    },
    // finishmore(done) {
    //   // 用来重新计算高度
    //   bs.refresh();
    //   if (!done) {
    //     // 允许下一次的下拉
    //     bs.finishPullUp();
    //   } else {
    //     this.show = true;
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.no-more {
  text-align: center;
  font-size: @m-font;
}
</style>
